<template>
	<view class="">
		<!-- 招标信息 -->
		<view class="active-list">

			<view class="active-title">
				<view class="active-top">
					姓名<text class="">*</text><text v-if="blurProNullShow">请输入采购联系人</text>
				</view>
				<u--textarea placeholder="请输入采购联系人(必填)" @blur="proBlur(productName)" v-model="productName" border="none"
					maxlength="12"></u--textarea>
			</view>

			<view class="active-title">
				<view class="active-top">
					联系电话<text class="">*</text><text v-if="blurPhoneNumNullShow">请输入联系电话</text>
				</view>
				<u--textarea :formatter="numFormatter" placeholder="请输入联系电话" @blur="phoneBlur(phone)" v-model="phone"
					border="none" maxlength="11"></u--textarea>
			</view>

			<view class="active-title">
				<view class="active-top">
					职位<text class="">*</text>
				</view>
				<view class="textareaPh" :style="{color:position?'#606266':'#c0c4cc'}" @click="positionFocus">
					{{position.trim()||'请选择您的职位(必填)'}}
				</view>
				<!-- 	<u--textarea placeholder="请选择您的职位(必填)" @focus="positionFocus" v-model="position" border="none"
					></u--textarea> -->

			</view>



			<view class="active-title">
				<view class="active-top">
					所在城市<text class="">*</text>
				</view>
				<u--textarea placeholder="点击选择您的公司所在地(必填)" @focus="areaFocus" v-model="areaVal"
					border="none"></u--textarea>

			</view>



			<view class="sign-up">
				<u-button type="primary" shape="circle" color="#2684ff" text="立即发布" @click="submitActive(item,index)">
				</u-button>
			</view>

		</view>

		<!-- 职位选择 -->
		<u-popup :show="positionShow" @close="positionClose">
			<view class="positon-box">
				<view class="pos-title">
					职位
				</view>
				<view class="pos-input">
					<u--input placeholder="手动填写您的职位(2-10个字)" border="surround" v-model.trim="postionValue"
						@change="postionChange" clearable></u--input>
				</view>
				<view class="pos-subtitle">
					快速选择
				</view>
				<view class="pos-select">
					<view :class="positionActiveIndex==index?'pos-select-active-box':'pos-select-box'"
						v-for="(item,index) in postionLists" @click="postionClick(item,index)" :key="index">
						{{item}}
					</view>
				</view>


			</view>
			<view class="pos-button">
				<view class="pos-button-cancel" @click="posCancel">
					取消
				</view>
				<view class="pos-button-confirm" @click="posConfirm">
					确认
				</view>
			</view>

		</u-popup>

		<t-index-address class="area-page" @select="select" v-if="areaShow"></t-index-address>
	</view>
</template>

<script>
	import baseConfig from '@/config/baseUrl.js'
	export default {
		components: {},
		data() {
			return {
				productName: '', //姓名输入信息
				blurProNullShow: false,
				blurPhoneNumNullShow: false, //电话输入信息为空失焦显示
				phone: '', //电话输入信息

				position: '', //职位
				positionShow: false, //职位隐藏
				postionLists: ["企业负责人", "总经理", "个体工商户", "业务总监", "销售总监", "市场总监", "业务经理", "销售经理", "市场经理", "销售/业务员", "项目经理",
					"工程师"
				],
				postionValue: '', //职位
				positionActiveIndex: -1,
				areaShow: false, //公司所在地弹窗
				areaVal: '', //公司所在地
				buyInfo: {},
				editSubmit: false, //编辑提交
				ids: '', //edit的id
			}
		},
		onReady() {
			// 如果需要兼容微信小程序的话，需要用此写法
			// this.$refs.textarea.setFormatter(this.numFormatter)
		},
		onShow() {
			this.buyInfo = this.$store.state.buyInfo
			console.log(this.buyInfo)
			this.userInfo = uni.getStorageSync('_userInfo')
			console.log(this.userInfo)
			this.historyInfo = this.$store.state.myBuyInfo
			console.log(this.historyInfo)
			if (this.historyInfo) {
				this.productName = this.historyInfo.userName
				this.phone = this.historyInfo.userTel
				this.position = this.historyInfo.userPosition
				this.areaVal = this.historyInfo.city
				this.ids = this.historyInfo.id
				this.editSubmit = true
			} else {
				this.ids = ''
				this.editSubmit = false
			}
		},
		methods: {
			select(data) {
				console.log(data.name)
				this.areaVal = data.name
				if (data.name) {
					this.areaShow = false
				}
			},
			// 数量输入框限制输入字数
			numFormatter(value) {
				console.log(value)
				// 让输入框只能输入数值，过滤其他字符
				return value.replace(/[^0-9]/ig, "")
			},
			// 采购产品数量失焦
			proNumBlur(e) {
				console.log(e)
				if (e) {
					this.blurProNumNullShow = false
				} else {
					this.blurProNumNullShow = true
				}
			},
			// 采购产品数量失焦
			phoneBlur(e) {
				console.log(e)
				if (e) {
					this.blurPhoneNumNullShow = false
				} else {
					this.blurPhoneNumNullShow = true
				}
			},

			// 职位聚焦事件
			positionFocus() {
				this.positionShow = true
			},
			// 职位弹窗关闭事件
			positionClose() {
				this.positionShow = false
			},

			postionChange(val) {
				console.log(val)
			},
			// 职位点击
			postionClick(item, index) {
				console.log(item, index)
				this.positionActiveIndex = index
				this.postionValue = item
				let obj = this.postionLists.find(ele => {
					return ele == item
				})
				console.log(obj)
			},
			// 职位取消选择
			posCancel() {
				this.positionActiveIndex = -1
				this.postionValue = ''
				this.positionShow = false
			},
			// 职位确认选择
			posConfirm() {
				if (this.postionValue.trim() == '') {
					uni.showToast({
						title: "请选择或者填写职位",
						icon: 'none'
					});
					return false
				}
				this.position = this.postionValue
				this.positionShow = false

			},

			// 公司所在地聚焦
			areaFocus() {
				this.areaShow = true
				// uni.navigateTo({
				// 	url: '/pagesBusiness/supplyArea/supplyArea'
				// })
			},
			areaSelectName(val) {
				console.log("子传父")
				console.log(val)
				this.areaVal = val
				this.areaShow = false
			},



			// 提交活动
			submitActive(item, index) {
				if (this.productName == "") {
					uni.showToast({
						title: "姓名不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.phone == "") {
					uni.showToast({
						title: "联系电话不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.position == '') {
					uni.showToast({
						title: "职位不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.areaVal == "") {
					uni.showToast({
						title: "所在城市不能为空",
						icon: 'none'
					});
					return false
				}


				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				let data = {
					openId: openId.openid,
					name: this.buyInfo.name,
					buyNum: this.buyInfo.buyNum,
					endTime: this.buyInfo.startTime,
					status: this.buyInfo.status,
					fileList: this.buyInfo.image,
					perfile: this.buyInfo.perfile,
					userName: this.productName,
					userTel: this.phone,
					userPosition: this.position,
					city: this.areaVal,
					id: this.ids
				}
				// uni.navigateTo({
				// 	url: '/pagesBusiness/purchaseSubmit/purchaseSubmit'
				// })

				// 编辑提交
				if (this.editSubmit) {

					this.$api.purchaseEditSubmit(data).then(res => {
						console.log(res)
						// this.signSuccess=res.result
						if (res.success) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							uni.setStorageSync(`supplyJumpTo`, 3)
							setTimeout(() => {
								uni.navigateTo({
									url: '/pagesBusiness/circleIndex/circleIndex'
								})
							}, 1000)

						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
				} else {
					// 添加提交
					this.$api.purchaseSubmit(data).then(res => {
						console.log(res)
						// this.signSuccess=res.result
						if (res.success) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							uni.setStorageSync(`supplyJumpTo`, 3)
							setTimeout(() => {
								uni.navigateTo({
									url: '/pagesBusiness/circleIndex/circleIndex'
								})
							}, 1000)

						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.active-list {
		background: #FFFFFF;
		border-bottom: 1upx solid #f6f6f6;
		padding: 41upx 30upx 100upx;
		position: relative;

		.active-title {
			letter-spacing: 3upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			// height: 110upx;
			border-bottom: 1px solid #f6f6f6;
			margin-top: 20upx;

			.textareaPh {
				font-size: 30rpx;
				height: 35px;
				margin-top: 25rpx;
			}

			.active-top {
				font-size: 26upx;
				font-weight: bold;

				text {
					color: red;
					margin-left: 5upx;
				}
			}

			.buy-radio {}

			.buy-many {
				font-size: 22upx;
				color: #2979ff;
				padding-bottom: 10upx;
			}

			::v-deep .u-radio-group {
				margin-top: 20upx;
				margin-bottom: 20upx;
			}

			::v-deep .u-textarea {
				margin-top: 25upx;
				display: flex;
				justify-content: space-between;
				padding: 0;
				// height: 60upx;
				font-size: 30upx;
			}

			::v-deep .u-textarea__count {
				position: relative;
			}
		}

		.describe-title {

			::v-deep .u-textarea {
				margin-top: 25upx;
				// display: flex;
				display: block;
				// justify-content: space-between;
				padding: 0;
				// height: 60upx;
				font-size: 30upx;
			}

			::v-deep .u-textarea__count {
				position: relative;
				display: block;
				text-align: right;
				margin-top: 10upx;
			}
		}

		.active-info {
			border-bottom: 1upx solid #EEEEEE;

			// padding: 37upx 0;
			.active-img-des {
				font-size: 24upx;
				color: rgb(153, 153, 153);
				margin-top: 20upx;
			}

			.active-info-img {
				margin: 0 auto;
				// margin-top: 30upx;
				// width: 690upx;
				// height: 350upx;
				border-radius: 30upx;
				position: relative;
				overflow: hidden;
				margin-top: 20upx;

				// border-bottom: 1upx solid #EEEEEE;
				// img {
				// 	width: 690upx;
				// 	height: 350upx;
				// }

				.active-info-mask {
					position: absolute;
					width: 690upx;
					height: 70upx;
					bottom: 0;
					background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.1000) 100%);
					line-height: 70upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}


		.sign-up {
			margin-top: 120upx;
		}

		::v-deep .u-upload__deletable {
			right: 20upx;
			top: 20upx;
			width: 20upx;
			height: 20upx;
			text-align: center;
			border-bottom-left-radius: 0;

			// background: transparent;
			.u-icon--right {
				text {
					font-size: 30upx !important;
					top: 7upx !important;
					left: 6upx !important;
				}
			}
		}

	}

	.positon-box {
		padding: 20upx;

		.pos-title {
			margin-top: 10upx;
			font-weight: bold;
		}

		.pos-input {
			margin-top: 20upx;
		}

		.pos-subtitle {
			margin-top: 20upx;
			font-weight: bold;
			color: #666666;
		}

		.pos-select {
			margin-top: 20upx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.pos-select-box {
				width: 200upx;
				background: #f5f5f5;
				text-align: center;
				line-height: 70upx;
				margin-left: 20upx;
				margin-top: 20upx;
				border-radius: 10upx;
			}

			.pos-select-active-box {
				width: 200upx;
				background: #f0f6fc;
				color: #2684ff;
				text-align: center;
				line-height: 70upx;
				margin-left: 20upx;
				margin-top: 20upx;
				border-radius: 10upx;
			}
		}


	}

	.pos-button {
		width: 100%;
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #e8e8e8;
		margin-top: 20upx;

		.pos-button-cancel {
			width: 50%;
			color: #2684ff;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
		}

		.pos-button-confirm {
			width: 50%;
			background: #2684ff;
			color: white;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
		}
	}

	.area-page {
		position: absolute;
		z-index: 50;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: white;
	}
</style>
